import React from "react";
import "./alert.scss"
import Success from "../icons/success";
import Info from "../icons/info";
import Warning from "../icons/warning";
import Error from "../icons/error";
import Close from "../icons/close";

/**
 * @param title Alert 标题
 * @param type Alert 类型
 * @param description 描述性文本
 * @param closable 是否可以关闭
 * @param center 文字是否居中
 * @param closeText 自定义关闭按钮文本
 * @param showIcon 是否显示类型图标
 * @param effect 主题样式
 * @param close 关闭时调用的函数
 */
interface Props {
    title?: React.ReactNode,
    type?: 'success' | 'warning' | 'info' | 'error',
    description?: React.ReactNode,
    closable?: boolean,
    center?: boolean,
    closeText?: string,
    showIcon?: boolean,
    effect?: 'light' | 'dark',
    close?: () => void
}

const Alert = ({
    title = "",
    type = "success",
    description,
    closable = true,
    center = false,
    closeText,
    showIcon = false,
    effect = "light",
    close = () => { }
}: Props) => {
    const getIcon = () => {
        if (type === "success") {
            return <Success />
        } else if (type === "info") {
            return <Info />
        } else if (type === "warning") {
            return <Warning />
        } else if (type === "error") {
            return <Error />
        }
    }

    const onClose = () => {
        close()
    }

    return (
        <>
            <div className={["pe-alert", `pe-alert-${effect}-${type}`].join(" ").trim()}
                style={{ justifyContent: center ? 'center' : '' }}>
                {
                    showIcon ? (
                        <div className="pe-alert-icon">
                            {getIcon()}
                        </div>
                    ) : null
                }
                <div className="pe-alert-title">
                    {title}
                </div>
                {
                    description || description === 0 ? (
                        <div>
                            {description}
                        </div>
                    ) : null
                }
                {
                    closable ? (
                        <div className="pe-alert-close" onClick={onClose}>
                            {
                                closeText ? closeText : <Close />
                            }
                        </div>
                    ) : null
                }
            </div>
        </>
    )
}

export default Alert